﻿<Page
    x:Name="pageRoot"
    x:Class="Wimm.UI.HubPage" 
    xmlns:CC="using:Wimm.CustomContols"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Wimm.UI"
    xmlns:data="using:Wimm.UI.Data"
    xmlns:common="using:Wimm.UI.Common"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Charting="using:DataVirtualization.Toolkit.Charting"
    xmlns:c="using:Wimm.CustomContols.PieDiagram"
    xmlns:storage="Windows.Storage"
    xmlns:conv="using:Wimm.Common.Converters"
    mc:Ignorable="d">

    <Page.Resources>
        <conv:StringFormatConverter x:Key="StringFormatConverter"/>
        <conv:LongToDateConverter x:Key="LongToDateConverter"/>
        <conv:StringToVisibilityConverter x:Key="StringToVisibilityConverter"/>

        <DataTemplate x:Key="ExpenseGridHeaderTemplate" >
            <Grid Background="DarkGray" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0" />
                <TextBlock Grid.Column="1" TextWrapping="Wrap" x:Uid="ExpenseGHImage" Text="Image" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,2,0,0" />
                <TextBlock Grid.Column="2" TextWrapping="Wrap" x:Uid="ExpenseGHTime"  Text="Time" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0"/>
                <TextBlock Grid.Column="3" TextWrapping="Wrap" x:Uid="ExpenseGHAmount" Text="Amount" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,2,0,0"  />
                <TextBlock Grid.Column="4" TextWrapping="Wrap" x:Uid="ExpenseGHComment" Text="Comment" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="25,2,0,0"  />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SmallExpenseGridHeaderTemplate" >
            <Grid Background="DarkGray" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" />
                <TextBlock Grid.Column="1" TextWrapping="Wrap" x:Uid="ExpenseGHImage" Text="Image" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" />
                <TextBlock Grid.Column="2" TextWrapping="Wrap" x:Uid="ExpenseGHTime" Text="Time" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0"/>
                <TextBlock Grid.Column="3" TextWrapping="Wrap" x:Uid="ExpenseGHAmount" Text="Amount" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0"  />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="ExpenseGridItemsTemplate">
            <Grid d:DesignHeight="50" Margin="0,5,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <AppBarButton Grid.Column="0" IsCompact="True" HorizontalAlignment="Left" Icon="Edit" VerticalAlignment="Center"/>
                <TextBlock  Grid.Column="0" HorizontalAlignment="Left" Text="" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <Image Grid.Column="1" VerticalAlignment="Center" Source="{Binding Icon.FileName,Converter={StaticResource StringFormatConverter},ConverterParameter='Assets/icon/{0}'}" Width="45" Height="45">
                    <ToolTipService.ToolTip>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Id="/>
                            <TextBlock Text="{Binding Id}"/>
                        </StackPanel>
                    </ToolTipService.ToolTip>
                </Image>
                <TextBlock Grid.Column="2" HorizontalAlignment="Left" Text="{Binding Time, Converter={StaticResource LongToDateConverter},ConverterParameter='dd MMMM'}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <TextBlock Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding AmountInDollars,Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
                <StackPanel Grid.Column="4" Orientation="Horizontal" HorizontalAlignment="Left">
                    <TextBlock VerticalAlignment="Center"  Margin="15,0,0,0"
                               Visibility="{Binding Comment, Converter={StaticResource StringToVisibilityConverter},ConverterParameter=true}"
                               Text="{Binding Comment, Mode=OneTime}" />
                    <Button Content="Comment" x:Uid="ExpenseGHBtnComment" VerticalAlignment="Center"  Margin="15,0,0,0" Opacity="0.2"
                            Visibility="{Binding Comment, Converter={StaticResource StringToVisibilityConverter}}">
                        <Button.Flyout>
                            <Flyout>
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Comment" x:Uid="ExpenseGHComment" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 0 5 0"/>
                                        <TextBox Text="{Binding Path=Comment, Mode=TwoWay}" />
                                    </StackPanel>
                                    <AppBarButton Icon="Add" Margin="0 10 0 0"
                                        Command="{Binding Path=Command}" />
                                </StackPanel>
                            </Flyout>
                        </Button.Flyout>
                    </Button>
                </StackPanel>      
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SmallExpenseGridItemsTemplate">
            <Grid d:DesignHeight="50" Margin="0,5,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                </Grid.ColumnDefinitions>
                <AppBarButton Grid.Column="0" IsCompact="True" HorizontalAlignment="Left" Icon="Edit" VerticalAlignment="Center"/>
                <Image Grid.Column="1" VerticalAlignment="Center" Source="{Binding Icon.FileName,Converter={StaticResource StringFormatConverter},ConverterParameter='Assets/icon/{0}'}" Width="45" Height="45"></Image>
                <TextBlock Grid.Column="2" HorizontalAlignment="Left" Text="{Binding Time, Converter={StaticResource LongToDateConverter},ConverterParameter='dd MMMM'}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <TextBlock Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding AmountInDollars,Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
            </Grid>
        </DataTemplate>
        
        <CC:DataGridTemplateSelector x:Key="ExpenseDataGridTemplateSelector"
             ItemTemplate="{StaticResource ExpenseGridItemsTemplate}"
             HeaderTemplate="{StaticResource ExpenseGridHeaderTemplate}"
             SmallItemTemplate="{StaticResource SmallExpenseGridItemsTemplate}"
             SmallHeaderTemplate="{StaticResource SmallExpenseGridHeaderTemplate}"/>

        <DataTemplate x:Key="IncomeGridHeaderTemplate" >
            <Grid Background="DarkGray" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0" />
                <TextBlock Grid.Column="1" TextWrapping="Wrap" x:Uid="ExpenseGHImage" Text="Image" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,2,0,0" />
                <TextBlock Grid.Column="2" TextWrapping="Wrap" x:Uid="ExpenseGHTime" Text="Time" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="15,2,0,0"/>
                <TextBlock Grid.Column="3" TextWrapping="Wrap" x:Uid="ExpenseGHAmount" Text="Amount" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="10,2,0,0"  />
                <TextBlock Grid.Column="4" TextWrapping="Wrap" x:Uid="ExpenseGHComment" Text="Comment" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="25,2,0,0"  />
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SmallIncomeGridHeaderTemplate" >
            <Grid Background="DarkGray" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Column="0" TextWrapping="Wrap" Text="" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" />
                <TextBlock Grid.Column="1" TextWrapping="Wrap" x:Uid="ExpenseGHImage" Text="Image" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0" />
                <TextBlock Grid.Column="2" TextWrapping="Wrap" x:Uid="ExpenseGHTime" Text="Time" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0"/>
                <TextBlock Grid.Column="3" TextWrapping="Wrap" x:Uid="ExpenseGHAmount" Text="Amount" VerticalAlignment="Top" HorizontalAlignment="Left" Margin="7,2,0,0"  />
            </Grid>
        </DataTemplate>

        <DataTemplate x:Key="IncomeGridItemsTemplate">
            <Grid d:DesignHeight="50" Margin="0,5,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                    <ColumnDefinition Width="*"/>
                </Grid.ColumnDefinitions>
                <AppBarButton Grid.Column="0" IsCompact="True" HorizontalAlignment="Left" Icon="Edit" VerticalAlignment="Center"/>
                <Image Grid.Column="1" VerticalAlignment="Center" Source="{Binding Icon.FileName,Converter={StaticResource StringFormatConverter},ConverterParameter='Assets/icon/iconIncame/{0}'}" Width="45" Height="45">
                    <ToolTipService.ToolTip>
                        <StackPanel Orientation="Horizontal">
                            <TextBlock Text="Id="/>
                            <TextBlock Text="{Binding Id}"/>
                        </StackPanel>
                    </ToolTipService.ToolTip>
                </Image>
                <TextBlock Grid.Column="2" HorizontalAlignment="Left" Text="{Binding Time, Converter={StaticResource LongToDateConverter},ConverterParameter='dd MMMM'}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <TextBlock Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Amount,Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
                <StackPanel Grid.Column="4" Orientation="Horizontal" HorizontalAlignment="Left">
                    <TextBlock VerticalAlignment="Center"  Margin="15,0,0,0"
                               Visibility="{Binding Comment, Converter={StaticResource StringToVisibilityConverter},ConverterParameter=true}"
                               Text="{Binding Comment, Mode=OneTime}" />
                    <Button Content="Comment" x:Uid="ExpenseGHBtnComment" VerticalAlignment="Center"  Margin="15,0,0,0" Opacity="0.2"
                            Visibility="{Binding Comment, Converter={StaticResource StringToVisibilityConverter}}">
                        <Button.Flyout>
                            <Flyout>
                                <StackPanel>
                                    <StackPanel Orientation="Horizontal">
                                        <TextBlock Text="Comment" x:Uid="ExpenseGHComment" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="0 0 5 0"/>
                                        <TextBox Text="{Binding Path=Comment, Mode=TwoWay}" />
                                    </StackPanel>
                                    <AppBarButton Icon="Add" Margin="0 10 0 0"
                                        Command="{Binding Path=Command}" />
                                </StackPanel>
                            </Flyout>
                        </Button.Flyout>
                    </Button>
                </StackPanel>
            </Grid>
        </DataTemplate>
        <DataTemplate x:Key="SmallIncomeGridItemsTemplate">
            <Grid d:DesignHeight="50" Margin="0,5,0,0" >
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="50"/>
                    <ColumnDefinition Width="150"/>
                    <ColumnDefinition Width="70"/>
                </Grid.ColumnDefinitions>
                <AppBarButton Grid.Column="0" IsCompact="True"  HorizontalAlignment="Left" Icon="Edit" VerticalAlignment="Center"/>
                <Image Grid.Column="1" VerticalAlignment="Center" Source="{Binding Icon.FileName,Converter={StaticResource StringFormatConverter},ConverterParameter='Assets/icon/iconIncame/{0}'}" Width="45" Height="45"></Image>
                <TextBlock Grid.Column="2" HorizontalAlignment="Left" Text="{Binding Time, Converter={StaticResource LongToDateConverter},ConverterParameter='dd MMMM'}" VerticalAlignment="Center" Margin="5,0,0,0"/>
                <TextBlock Grid.Column="3" HorizontalAlignment="Left" VerticalAlignment="Center" Text="{Binding Amount,Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
            </Grid>
        </DataTemplate>

        <CC:DataGridTemplateSelector x:Key="IncomeDataGridTemplateSelector"
             ItemTemplate="{StaticResource IncomeGridItemsTemplate}"
             HeaderTemplate="{StaticResource IncomeGridHeaderTemplate}"
             SmallItemTemplate="{StaticResource SmallIncomeGridItemsTemplate}"
             SmallHeaderTemplate="{StaticResource SmallIncomeGridHeaderTemplate}"/>

    </Page.Resources>
    <Page.TopAppBar>
        <AppBar>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="auto"/>
                    <ColumnDefinition Width="auto"/>
                </Grid.ColumnDefinitions>
                <AppBarButton x:Name="HomeAppBarButton" Click="HomeAppBarButton_Click" Grid.Column="0" Icon="Home" Margin="0,15,0,0"  />
            </Grid>
        </AppBar>
    </Page.TopAppBar>

    <!--
    This grid acts as a root panel for the page.
  -->
    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Hub x:Name="hubMain" SectionHeaderClick="Hub_SectionHeaderClick">
            <Hub.Header>
                <!-- Back button and page title -->
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="140"/>
                        <ColumnDefinition Width="*"/>
                        <ColumnDefinition Width="*"/>
                    </Grid.ColumnDefinitions>
                    <Button  x:Name="backButton" Style="{StaticResource NavigationBackButtonNormalStyle}"
                        Margin="0 0 39 0" 
                        VerticalAlignment="Top"
                        Command="{Binding NavigationHelper.GoBackCommand, ElementName=pageRoot}"
                        AutomationProperties.Name="Back"
                        AutomationProperties.AutomationId="BackButton"
                        AutomationProperties.ItemType="Navigation Button"/>
                    <TextBlock x:Name="pageTitle" x:Uid="AppName" Style="{StaticResource HeaderTextBlockStyle}" Grid.Column="1" 
                        VerticalAlignment="Top" IsHitTestVisible="false" TextWrapping="NoWrap" />
                </Grid>
            </Hub.Header>
            
            <HubSection Width="{Binding ElementName=hubMain, Path=ActualWidth, Mode=OneWay}"  
                        x:Name="expensesHub" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <DataTemplate>
                    <Grid x:Name="expenseGridLayout" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>

                        <CC:Filter Grid.Row="0" Grid.ColumnSpan="2" FilterData="{Binding ExpensesFilterData}"/>

                        <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
                            <TextBlock Style="{StaticResource HeaderTextBlockStyle}" x:Uid="ExpensesTitle" Text="Expenses" Margin="0 0 10 0"/>
                            <AppBarButton IsCompact="True" Icon="Add" Click="AddExpensesAppBarButton_Click"></AppBarButton>
                            <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" x:Uid ="TotalSumExpenses" Text="Total sum" Margin="60 0 20 0"/>
                            <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Margin="0 0 0 0"
                                       Text="{Binding ExpenseTotal, Mode=OneWay, Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
                        </StackPanel>
                        <Border Grid.Column="0" Grid.Row="2" BorderThickness="4" BorderBrush="DarkGray">
                            <CC:ExpenseDataGrid PagedGridData="{Binding ExpensesLoader}"
                                            ItemTemplateSelector="{StaticResource ExpenseDataGridTemplateSelector}">
                            </CC:ExpenseDataGrid>
                        </Border>
                        <Border Grid.Column="1" Grid.Row="2" BorderThickness="4" BorderBrush="DarkGray">
                            <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}" SizeChanged="Grid_SizeChanged">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Charting:PieChart Loaded="ExpensePieChart_Loaded"  HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"/>
                            </Grid>
                        </Border>
                    </Grid>
                </DataTemplate>
            </HubSection>
            <HubSection Width="800" Margin="0,0,0,0">
                <HubSection.Background>
                    <ImageBrush ImageSource="Assets/finanses.png" Stretch="UniformToFill" />
                </HubSection.Background>
            </HubSection>
            <HubSection Width="{Binding ElementName=hubMain, Path=ActualWidth, Mode=OneWay}"  
                        x:Name="incomeHub" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch">
                <DataTemplate>
                    <Grid x:Name="incomeGridLayout" HorizontalAlignment="Stretch"  VerticalAlignment="Stretch">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="Auto"/>
                            <RowDefinition Height="*"/>
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="3*"/>
                            <ColumnDefinition Width="2*"/>
                        </Grid.ColumnDefinitions>

                        <CC:Filter Grid.Row="0" Grid.ColumnSpan="2" FilterData="{Binding IncomesFilterData}"/>

                        <StackPanel Grid.Row="1" Grid.ColumnSpan="2" Orientation="Horizontal">
                            <TextBlock Style="{StaticResource HeaderTextBlockStyle}" x:Uid="IncomesTitle" Text="Incomes" Margin="0 0 10 0"/>
                            <AppBarButton IsCompact="True" Icon="Add" Click="AddIncomesButton_Click"></AppBarButton>
                            <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Text="Total sum" x:Uid="TotalSumIncomes" Margin="80 0 20 0"/>
                            <TextBlock Style="{StaticResource SubheaderTextBlockStyle}" Margin="0 0 0 0" 
                                       Text="{Binding IncomeTotal, Mode=OneWay, Converter={StaticResource StringFormatConverter},ConverterParameter='\{0:C2\}'}"/>
                        </StackPanel>
                        <Border Grid.Column="0" Grid.Row="2" BorderThickness="4" BorderBrush="DarkGray">
                            <CC:IncomeDataGrid PagedGridData="{Binding IncomesLoader}"
                                            ItemTemplateSelector="{StaticResource IncomeDataGridTemplateSelector}">
                            </CC:IncomeDataGrid>
                        </Border>
                        <Border Grid.Column="1" Grid.Row="2" BorderThickness="4" BorderBrush="DarkGray">
                            <Grid  Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="*"/>
                                </Grid.ColumnDefinitions>
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <Charting:PieChart Loaded="IncomePieChart_Loaded"  HorizontalAlignment="Stretch"  VerticalAlignment="Stretch"/>
                            </Grid>
                        </Border>
                    </Grid>
                </DataTemplate>
            </HubSection>
        </Hub>
    </Grid>
    <Page.BottomAppBar>
        <CommandBar >
            <CommandBar.PrimaryCommands>
                <AppBarButton x:Name="RemoveButton" IsCompact="True" x:Uid="ExpenseMenu" Label="Expenses" Icon="Add" Click="AddExpensesAppBarButton_Click"></AppBarButton>
                <AppBarButton  x:Name="AddAppBarButton" IsCompact="True" x:Uid="IncomeMenu" Label="Incomes" Icon="Add" Click="AddIncomesButton_Click"/>
                <AppBarButton  x:Name="DeleteAppBarButton" IsCompact="True" x:Uid="AccountMenu" Label="Accounts" Icon="Flag">
                    <AppBarButton.Flyout>
                        <MenuFlyout>
                            <MenuFlyoutItem x:Name="LogedUserItem" Text="{Binding LogedUser.DisplayName, Mode=OneWay}"/>
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
                <AppBarSeparator IsCompact="True" />
                <AppBarButton  x:Name="SettingAppBarButton" IsCompact="True" x:Uid="LanguageMenu" Label="Language" Icon="Setting" >
                    <AppBarButton.Flyout>
                        <MenuFlyout >
                            <MenuFlyoutItem x:Name="USButton" x:Uid="AppBarEnglish" Text="English" Click="EnglishLanguageButton_Click"/>
                            <MenuFlyoutItem x:Name="RUButton" x:Uid="AppBarRussian" Text="Russian" Click="RussianLanguageButton_Click"/>
                            <MenuFlyoutItem x:Name="UkButton" x:Uid="AppBarUkraine" Text="Ukraine" Click="UkraineLanguageButton_Click"/>
                            <MenuFlyoutItem x:Name="FrButton" x:Uid="AppBArFrance" Text="France" Click="FranceLanguageButton_Click"/>
                            <MenuFlyoutSeparator/>
                            <ToggleMenuFlyoutItem x:Name="SettingAppBarButton4" x:Uid="AboutAppMenu" Text="About application"/>
                        </MenuFlyout>
                    </AppBarButton.Flyout>
                </AppBarButton>
            </CommandBar.PrimaryCommands>
            <CommandBar.SecondaryCommands>
                <AppBarButton x:Name="FavoriteAppBarButton" IsCompact="True" x:Uid="CalendarMenu" Label="Calendar" Icon="calendar" Click="Calendar_Click">
                </AppBarButton>
                <AppBarButton x:Name="AppBarButtonReport" IsCompact="True" x:Uid="ReportMenu" Label="Report" Icon="Bookmarks" Click="YearDiagram_Click"/>
            </CommandBar.SecondaryCommands>
        </CommandBar>
    </Page.BottomAppBar>
</Page>
